<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        * {
            padding: 0;
            margin: 0;
            box-sizing: border-box;
            border-radius: 5px;
        }
        
        .boxs {
            width: 300px;
            height: 450px;
            transform-style: preserve-3d;
            margin: 50px 50%;
            position: relative;
            transform: rotateX(10deg);
            transform-origin: bottom;
        }
        
        .box {
            width: 100%;
            height: 100%;
            /* border: 1px solid black; */
            box-shadow: 0px 0px 10px #888;
            background: url(./images/card_1.jpg) no-repeat;
            background-size: cover;
            transition: 5s;
            position: absolute;
            z-index: 3;
            transform-origin: left;
        }
        
        .box_1 {
            width: 100%;
            height: 100%;
            /* border: 1px solid black; */
            box-shadow: 0px 0px 10px #888, 0px 0px 10px white inset;
            background: url(./images/7da21092de33e16c58b69f58327dd5c7.png) no-repeat, url(./images/fc3f9eda3a81060581607e747c56ee2b.png) no-repeat center;
            background-size: 100% 100%, 200px;
            position: absolute;
            z-index: 2;
            transform-origin: left;
            transition: 5s;
            /* transform: rotateY(-80deg); */
            padding: 100px 10px 50px 10px;
        }
        
        .box_1>.find {
            width: 60px;
            height: 30px;
            border: 1px solid black;
            border-radius: 5px;
            text-align: center;
            line-height: 30px;
            position: absolute;
            bottom: 10px;
            left: 50%;
            transform: translateX(-50%);
            cursor: pointer;
            box-shadow: 0px 0px 10px black;
        }
        
        .box_1>.res {
            bottom: 50px;
            left: 250px;
        }
        
        .box_1>.header {
            margin-bottom: 10px;
        }
        
        .box_1 input {
            border: none;
            width: 100px;
            height: 30px;
            padding-left: 5px;
            box-shadow: 0px 0px 5px black inset;
            outline: none;
            border-radius: 0px;
        }
        
        .box_1>.header select {
            height: 30px;
        }
        
        .box_1>.cont {
            width: 200px;
            height: 100px;
            border-radius: 0px;
            box-shadow: 0px 0px 5px black inset;
            line-height: 100px;
            font-size: 40px;
            color: red;
            font-weight: bold;
            position: absolute;
            left: 50px;
            top: 45%;
            transform: translateY(-50%);
            text-align: center;
        }
        
        .box_1 .btn {
            position: absolute;
            bottom: 145px;
        }
        
        .box_1>.fotter {
            position: absolute;
            bottom: 90px;
            left: 10px;
        }
    </style>
</head>

<body>
    <div class="boxs">

        <div class="box"></div>
        <div class="box_1">
            <p class="header">
                <span>祝：</span>
                <input type="text" placeholder="请输入">
                <select>
                <option >小朋友</option>
                <option >大朋友</option>
               </select>
            </p>
            <p class="cont"></p><button class="find btn">抽取</button>
            <p class="fotter"><span>留名：</span><input type="text" placeholder="请留名"></p>
            <p class="find res">生成</p>
            <p class="find find_1">查看</p>

        </div>
    </div>
    <script>
        let oBox_1 = document.querySelector('.box_1');
        let oBox = document.querySelector('.box')
        let oBoxs = document.querySelector('.boxs')
        let oP = document.querySelector('.find_1')
        let oCont = document.querySelector('.cont')
        let oBtn = document.querySelector('button');
        let oRes = document.querySelector('.res');

        oBoxs.onmouseover = () => {
            oBox.style.cssText = 'transform: rotateY(-180deg)'

        }

        // oBoxs.onmouseout = () => {
        //     oBox.style.cssText = 'transform: rotateY(0deg)'
        //     oBoxs.style.cssText = 'transform: rotateX(10deg); transition: 5s;'
        // }
        oP.onmousedown = () => {
            oP.style.cssText = 'bottom:11px'
        }
        oP.onmouseup = () => {
            oP.style.cssText = 'bottom:10px'
        }
        oRes.onmousedown = () => {
            oRes.style.cssText = 'bottom:51px'
        }
        oRes.onmouseup = () => {
            oRes.style.cssText = 'bottom:50px'
        }
        let flag = false;
        let arr = ["虎虎生威", "虎年大吉", "万事如意", "心想事成", "生龙活虎", "福虎生旺", "虎气十足", "虎兆丰年", "金虎送喜"];
        oCont.innerHTML = arr[0];
        let num = 0;

        //定时器让祝福语随机
        set();

        function set() {
            t = setInterval(function() {
                if (num >= arr.length - 1) {
                    num = 0;
                } else {
                    num++;
                }
                // console.log(num);
                oCont.innerHTML = arr[num];
            }, 100)
        }

        oBtn.onclick = function() {
            flag = !flag;
            oBtn.style = "box-shadow: 0px 0px 10px white"
            clearInterval(t);
            // console.log(oCont.innerHTML);
            if (!flag) {
                oBtn.style = "box-shadow: 0px 0px 10px black";
                set();
            }
        }
    </script>
</body>

</html>